import { fontFamily } from 'tailwindcss/defaultTheme';
import tailwindcssAnimate from 'tailwindcss-animate';

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: ['class'],
  content: [
    'assets/**/*.{html,js,ts,jsx,tsx}',
    'entrypoints/**/*.{html,js,ts,jsx,tsx}',
    'components/**/*.{html,js,ts,jsx,tsx}',
  ],
  theme: {
    container: {
      center: true,
      padding: '32px', // 2rem * 16 = 32px
      screens: {
        '2xl': '1400px',
      },
    },
    extend: {
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
      },
      fontFamily: {
        sans: ['var(--font-sans)', ...fontFamily.sans],
      },
      keyframes: {
        'accordion-down': {
          from: { height: '0' },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: '0' },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },

      borderRadius: {
        none: '0px',
        sm: '2px',
        DEFAULT: '4px',
        md: '6px',
        lg: '8px',
        xl: '12px',
        '2xl': '16px',
        '3xl': '24px',
        full: '9999px',
      },

      columns: {
        auto: 'auto',
        1: '1',
        2: '2',
        3: '3',
        4: '4',
        5: '5',
        6: '6',
        7: '7',
        8: '8',
        9: '9',
        10: '10',
        11: '11',
        12: '12',
        '3xs': '256px', // 16rem * 16 = 256px
        '2xs': '288px', // 18rem * 16 = 288px
        xs: '320px', // 20rem * 16 = 320px
        sm: '384px', // 24rem * 16 = 384px
        md: '448px', // 28rem * 16 = 448px
        lg: '512px', // 32rem * 16 = 512px
        xl: '576px', // 36rem * 16 = 576px
        '2xl': '672px', // 42rem * 16 = 672px
        '3xl': '768px', // 48rem * 16 = 768px
        '4xl': '896px', // 56rem * 16 = 896px
        '5xl': '1024px', // 64rem * 16 = 1024px
        '6xl': '1152px', // 72rem * 16 = 1152px
        '7xl': '1280px', // 80rem * 16 = 1280px
      },

      fontSize: {
        xs: ['12px', { lineHeight: '16px' }], // 0.75rem * 16 = 12px, 1rem * 16 = 16px
        sm: ['14px', { lineHeight: '20px' }], // 0.875rem * 16 = 14px, 1.25rem * 16 = 20px
        base: ['16px', { lineHeight: '24px' }], // 1rem * 16 = 16px, 1.5rem * 16 = 24px
        lg: ['18px', { lineHeight: '28px' }], // 1.125rem * 16 = 18px, 1.75rem * 16 = 28px
        xl: ['20px', { lineHeight: '28px' }], // 1.25rem * 16 = 20px, 1.75rem * 16 = 28px
        '2xl': ['24px', { lineHeight: '32px' }], // 1.5rem * 16 = 24px, 2rem * 16 = 32px
        '3xl': ['30px', { lineHeight: '36px' }], // 1.875rem * 16 = 30px, 2.25rem * 16 = 36px
        '4xl': ['36px', { lineHeight: '40px' }], // 2.25rem * 16 = 36px, 2.5rem * 16 = 40px
        '5xl': ['48px', { lineHeight: '1' }], // 3rem * 16 = 48px, 1rem * 16 = 16px
        '6xl': ['60px', { lineHeight: '1' }], // 3.75rem * 16 = 60px, 1rem * 16 = 16px
        '7xl': ['72px', { lineHeight: '1' }], // 4.5rem * 16 = 72px, 1rem * 16 = 16px
        '8xl': ['96px', { lineHeight: '1' }], // 6rem * 16 = 96px, 1rem * 16 = 16px
        '9xl': ['128px', { lineHeight: '1' }], // 8rem * 16 = 128px, 1rem * 16 = 16px
      },

      letterSpacing: {
        tighter: '-0.8px',
        tight: '-0.4px',
        normal: '0px',
        wide: '0.4px',
        wider: '0.8px',
        widest: '1.6px',
      },

      lineHeight: {
        none: '1',
        tight: '1.25',
        snug: '1.375',
        normal: '1.5',
        relaxed: '1.625',
        loose: '2',
        3: '12px',
        4: '16px',
        5: '20px',
        6: '24px',
        7: '28px',
        8: '32px',
        9: '36px',
        10: '40px',
      },

      maxWidth: ({ theme, breakpoints }) => ({
        ...theme('spacing'),
        none: 'none',
        xs: '320px', // 20rem * 16 = 320px
        sm: '384px', // 24rem * 16 = 384px
        md: '448px', // 28rem * 16 = 448px
        lg: '512px', // 32rem * 16 = 512px
        xl: '576px', // 36rem * 16 = 576px
        '2xl': '672px', // 42rem * 16 = 672px
        '3xl': '768px', // 48rem * 16 = 768px
        '4xl': '896px', // 56rem * 16 = 896px
        '5xl': '1024px', // 64rem * 16 = 1024px
        '6xl': '1152px', // 72rem * 16 = 1152px
        '7xl': '1280px', // 80rem * 16 = 1280px
        full: '100%',
        min: 'min-content',
        max: 'max-content',
        fit: 'fit-content',
        prose: '65ch',
        ...breakpoints(theme('screens')),
      }),

      spacing: {
        px: '1px',
        0: '0px',
        0.5: '2px', // 0.125rem * 16 = 2px
        1: '4px', // 0.25rem * 16 = 4px
        1.5: '6px', // 0.375rem * 16 = 6px
        2: '8px', // 0.5rem * 16 = 8px
        2.5: '10px', // 0.625rem * 16 = 10px
        3: '12px', // 0.75rem * 16 = 12px
        3.5: '14px', // 0.875rem * 16 = 14px
        4: '16px', // 1rem * 16 = 16px
        5: '20px', // 1.25rem * 16 = 20px
        6: '24px', // 1.5rem * 16 = 24px
        7: '28px', // 1.75rem * 16 = 28px
        8: '32px', // 2rem * 16 = 32px
        9: '36px', // 2.25rem * 16 = 36px
        10: '40px', // 2.5rem * 16 = 40px
        11: '44px', // 2.75rem * 16 = 44px
        12: '48px', // 3rem * 16 = 48px
        14: '56px', // 3.5rem * 16 = 56px
        16: '64px', // 4rem * 16 = 64px
        20: '80px', // 5rem * 16 = 80px
        24: '96px', // 6rem * 16 = 96px
        28: '112px', // 7rem * 16 = 112px
        32: '128px', // 8rem * 16 = 128px
        36: '144px', // 9rem * 16 = 144px
        40: '160px', // 10rem * 16 = 160px
        44: '176px', // 11rem * 16 = 176px
        48: '192px', // 12rem * 16 = 192px
        52: '208px', // 13rem * 16 = 208px
        56: '224px', // 14rem * 16 = 224px
        60: '240px', // 15rem * 16 = 240px
        64: '256px', // 16rem * 16 = 256px
        72: '288px', // 18rem * 16 = 288px
        80: '320px', // 20rem * 16 = 320px
        96: '384px', // 24rem * 16 = 384px
      },
    },
  },
  plugins: [tailwindcssAnimate],
};
